<template>
    <!-- 超级会员部分 -->
    <div class="supermember" v-if="!isVIP">
        <div class="left">
            <img src="@/assets/img/super_member.png">
            <h3>超级会员</h3>
            <p>&#8226; 每单享超值权益</p>
        </div>
        <div class="right">
            <router-link :to="{name:'paymentPage',query:{id:'vip'}}">
                立即开通 &gt;
            </router-link>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import {checkVIPRequest} from'@/js/request'
import { useRouter } from 'vue-router';
let router=useRouter()
let isVIP = ref(false)
checkVIPRequest(respon=>{
    if(respon.data.code==200){
        isVIP.value=respon.data.detail
    }
})
</script>

<style lang="scss" scoped>
/****************** 超级会员部分 ******************/
.supermember {
    /*这里也设置容器宽度95%，不能用padding，因为背景色也会充满padding*/
    width: 95%;
    margin: 0 auto;
    height: 11.5vw;
    background-color: #FEEDC1;
    margin-top: 1.3vw;
    border-radius: 2px;
    color: #644F1B;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        margin-left: 4vw;
        user-select: none;

        img {
            width: 6vw;
            height: 6vw;
            margin-right: 2vw;
        }

        h3 {
            font-size: 4vw;
            margin-right: 2vw;
        }

        p {
            font-size: 3vw;
        }

    }

    .right {
        font-size: 3vw;
        margin-right: 4vw;
        cursor: pointer;
        a{
            color: #000;
            text-decoration: none;
        }
    }
}
</style>